/**
 * Created by yiliu on 2017/9/1.
 */

$(function () {
    $('#validation-form').bootstrapValidator({
        /**
         *  指定不验证的情况
         *  值可设置为以下三种类型：
         *  1、String  ':disabled, :hidden, :not(:visible)'
         *  2、Array  默认值  [':disabled', ':hidden', ':not(:visible)']
         *  3、带回调函数
         [':disabled', ':hidden', function($field, validator) {
            // $field 当前验证字段dom节点
            // validator 验证实例对象
            // 可以再次自定义不要验证的规则
            // 必须要return，return true or false;
            return !$field.is(':visible');
        }]
         */
        excluded: [':disabled', ':hidden', ':not(:visible)'],
        /**
         * 指定验证后验证字段的提示字体图标。（默认是bootstrap风格）
         * Bootstrap 版本 >= 3.1.0
         * 也可以使用任何自定义风格，只要引入好相关的字体文件即可
         * 默认样式
         .form-horizontal .has-feedback .form-control-feedback {
            top: 0;
            right: 15px;
        }
         * 自定义该样式覆盖默认样式
         .form-horizontal .has-feedback .form-control-feedback {
            top: 0;
            right: -15px;
        }
         .form-horizontal .has-feedback .input-group .form-control-feedback {
            top: 0;
            right: -30px;
        }
         */
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        live: 'enabled',//生效规则（三选一）,enabled 字段值有变化就触发验证,disabled,submitted 当点击提交时验证并展示错误信息
        message: 'This value is not valid',//为每个字段指定通用错误提示语
        submitButtons: 'button[type="submit"]',//指定提交的按钮，例如：'.submitBtn' '#submitBtn',当表单验证不通过时，该按钮为disabled
        /**
         * submitHandler: function(validator, form, submitButton) {
             *   validator: 表单验证实例对象
             *   form  jq对象  指定表单对象
             *   submitButton  jq对象  指定提交按钮的对象
             * }
         * 在ajax提交表单时很实用
         *   submitHandler: function(validator, form, submitButton) {
            // 实用ajax提交表单
            $.post(form.attr('action'), form.serialize(), function(result) {
                // .自定义回调逻辑
            }, 'json');
         }
         *
         */
        submitHandler: null,
        /**
         * 为每个字段设置统一触发验证方式（也可在fields中为每个字段单独定义），默认是live配置的方式，数据改变就改变
         * 也可以指定一个或多个（多个空格隔开） 'focus blur keyup'
         */
        trigger: 'blur',
        threshold: null,//Number类型  为每个字段设置统一的开始验证情况，当输入字符大于等于设置的数值后才实时触发验证
        //表单域配置
        fields: {
            name: {
                enabled: true,//隐藏或显示 该字段的验证
                message: '用户名验证失败',//错误提示信息
                container: null,//定义错误提示位置  值为CSS选择器设置方式。例如：'#firstNameMeg' '.lastNameMeg' '[data-stripe="exp-month"]'
                /**
                 * 定义验证的节点，CSS选择器设置方式，可不必须是name值。
                 * 若是id，class, name属性，<fieldName>为该属性值
                 * 若是其他属性值且有中划线链接，<fieldName>转换为驼峰格式  selector: '[data-stripe="exp-month"]' =>  expMonth
                 */
                selector: null,
                trigger: null,//定义触发验证方式（也可在fields中为每个字段单独定义），默认是live配置的方式，数据改变就改变。也可以指定一个或多个（多个空格隔开） 'focus blur keyup'
                // 定义每个验证规则
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: '邮箱地址不能为空'
                    },
                    remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                        url: '/user/checkEmail',//验证地址
                        message: '邮箱已存在',//提示消息
                        delay: 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                        type: 'POST'//请求方式
                        /**自定义提交数据，默认值提交当前input value
                         *  data: function(validator) {
                               return {
                                   password: $('[name="passwordNameAttributeInYourForm"]').val(),
                                   whatever: $('[name="whateverNameAttributeInYourForm"]').val()
                               };
                            }
                         */

                    }
                }
            },
            phone: {
                message: 'The phone is not valid',
                validators: {
                    notEmpty: {
                        message: '手机号码不能为空'
                    },
                    stringLength: {
                        min: 11,
                        max: 11,
                        message: '请输入11位手机号码'
                    },
                    regexp: {
                        regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                        message: '请输入正确的手机号码'
                    }
                }
            }
        }
    });
});
$("#finish").on("click", function () {
    //开启验证
    var valid = $('#validation-form').bootstrapValidator('validate');

//是否通过校验
    if (!valid) {
        //没有通过校验
        console.log("pass");
    } else {
        //通过校验，可进行提交等操作
        console.log("permit");
    }


    //自定义表单验证规则
    $.fn.bootstrapValidator.validators = {
        name: {
            /**
             * @param {BootstrapValidator} 表单验证实例对象
             * @param {jQuery} $field jQuery 对象
             * @param {Object} 表单验证配置项值
             * @returns {boolean}
             */
            validate: function (validator, $field, options) {
                // 表单输入的值
                // var value = $field.val();

                //options为<validatorOptions>对象，直接.获取需要的值

                // 返回true/false
                //也可返回{ valid : true/false, message: 'XXXX'}
                return reg.test($field.val());

            }
        }
    };
});